<template>
    <dzs-dialog :title="title" :isShow="isShow" @close="onCancel" @open="onOpen">
        <dzs-form :loadingOption="formInfo" :status="status" ref="myForm" v-model:value="formData"
            :options="formOptions" @onCancel="onCancel" @onSubmit="onSubmit">
        </dzs-form>
    </dzs-dialog>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import type { CommonResponse } from "@/@types";
import type { dzsFormProps, children } from "@/components/dzs-form/@types";
import type { dzsFormInstance } from "@/components/dzs-form";
import type { formData } from "../@types";
import { ElNotification } from 'element-plus';
import { addUserTask, updataUserTask } from "../api/api";
import { getAdminUser } from "@/views/system-manage/user-manage/api/api"
import type { tableItem } from "../@types";
import stores from "@/stores/index"

const useUserInfoStore = stores.useUserInfoStore();
const emit = defineEmits(['cancel', 'update:isShow', 'onHoldSearch'])
const props = defineProps<{
    dialogData?: tableItem,
    status: string,
    isShow: boolean
}>()

const myForm = ref<dzsFormInstance>();
const formData = ref<formData>({
    ID: "",
    title: "",
    is_finish: "",
    execution_time: "",
    personnel: ""
})

const adminUserList = ref<children[]>([])
const userInfo = ref(useUserInfoStore.getUserInfo());

const formInfo = ref({
    loading: false,
})

const title = computed(() => {
    return props.status === "add" ? "添加友情链接" : props.status === "edit" ? "编辑友情链接" : "查看友情链接详情"
})
const formOptions = computed<dzsFormProps['formOptions']>(() => {
    return {
        formProps: {
            "labelWidth": "100px"
        },
        formItem: [
            {
                label: "ID",
                type: "input",
                key: "ID",
                isHidden: true,
            },
            {
                label: "任务名称",
                type: "input",
                key: "title",
                rules: [
                    { required: true, message: '请输入任务名称', trigger: 'blur' },
                ]
            },
            {
                label: "执行时间",
                type: "date",
                key: "execution_time",
                rules: [
                    { required: true, message: '请选择执行时间', trigger: 'change' },
                ],
                props: {
                    type: "datetime",
                    format: "YYYY-MM-DD HH:mm:ss",
                    valueFormat: "YYYY-MM-DD HH:mm:ss",
                }
            },
            {
                label: "任务人员",
                type: "select",
                key: "personnel",
                rules: [
                    { required: true, message: '请选择任务人员', trigger: 'change' },
                ],
                children: adminUserList.value,
                props: {
                    multiple: true,
                    clearable: true
                }
            },
            {
                label: "是否完成",
                type: "switch",
                key: "is_finish",
                props: {
                    "active-value": 1,
                    "inactive-value": 0
                },
                span: 12
            }
        ]
    }
})

const onCancel = () => {
    myForm.value?.onCancel<formData>(false, {
        success: (res) => {
            formData.value = res
        }
    })
    emit('cancel');
    emit('update:isShow', false);
}


const onOpen = () => {
    if (props.dialogData?.ID) {
        formData.value = props.dialogData
    }
    getAdminUsers();
}

const getAdminUsers = () => {
    getAdminUser({
        isAll: true
    }).then(res => {
        const result: CommonResponse<children[]> = res;
        adminUserList.value = result.data.data;
        myForm.value?.clearForm && myForm.value.clearForm().then(() => {
            if (!props.dialogData?.ID) {
                formData.value.personnel = [userInfo.value?.ID];
            }
        })

    })

}

const onSubmit = () => {
    formInfo.value.loading = true;
    let personnel = formData.value.personnel as string[];
    formData.value.personnel = personnel.join(",");
    if (props.status === "edit") {
        updataUserTask({
            ...formData.value
        }).then(res => {
            formInfo.value.loading = false;
            ElNotification({
                title: '成功',
                message: "提交成功",
                type: 'success'
            })
            emit("onHoldSearch");
            onCancel();
        }).catch(() => {
            formInfo.value.loading = false;
        })
        return;
    }

    addUserTask({
        ...formData.value
    }).then(res => {
        formInfo.value.loading = false;
        ElNotification({
            title: '成功',
            message: "提交成功",
            type: 'success'
        })
        emit("onHoldSearch");
        onCancel();
    }).catch(() => {
        formInfo.value.loading = false;
    })
}
</script>
<style scoped></style>